<template>
  <div class="warp">
    <a-affix :offset-top="0">
      <div class="page-top">
        <span style="margin-left: 20px"></span>
        <span>vue+antdv原生代码生成器</span>
        <div>
          <a-button
            type="link"
            style="color: #fff; font-weight: bold; font-size: 18px"
            @click="$router.push({ path: '/' })"
          >
            vue+antdv封装版代码生成成器
          </a-button>
        </div>
      </div>
    </a-affix>
    <a-button type="link" @click="previewCode(1)">查看antdv代码</a-button>
    <a-button type="link" @click="previewCode(2)">查看element代码</a-button>
    <div class="content">
      <a-card title="基础字段设置"
        ><div class="basics">
          <a-card
            hoverable
            :title="item.columnName"
            class="basicsCard"
            v-for="(item, index) in basicsData"
            :key="index"
          >
            <a-icon slot="extra" type="close" />
            <a-form-model
              :model="item"
              layout="horizontal"
              v-bind="{
                labelCol: { span: 8 },
                wrapperCol: { span: 14 }
              }"
            >
              <a-form-model-item label="字段描述">
                <a-input
                  v-model="item.label"
                  allow-clear
                  placeholder="请输入字段描述"
                  @change="labelChange($event, item, index)"
                />
              </a-form-model-item>
              <a-form-model-item label="字段类型">
                <a-select
                  v-model="item.fieldType"
                  allow-clear
                  :options="typeOptions"
                >
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="是否必填">
                <a-switch v-model="item.isRequired">
                  <a-icon slot="checkedChildren" type="check" />
                  <a-icon slot="unCheckedChildren" type="close" />
                </a-switch>
              </a-form-model-item>
            </a-form-model>

            <template slot="actions" class="ant-card-actions">
              <a-button type="link" icon="setting" @click="fieldSet(item)">
                字段设置
              </a-button>
              <a-popconfirm
                :title="`是否删除${item.label}字段`"
                ok-text="确认"
                cancel-text="取消"
              >
                <a-button type="link" icon="delete">删除字段</a-button>
              </a-popconfirm>
            </template>
          </a-card>
        </div></a-card
      >

      <!-- crud设置 -->
      <a-card title="crud设置">
        <a-form-model layout="inline">
          <a-form-model-item
            :label="item.label"
            v-for="(item, index) in crudData"
            :key="index"
          >
            <a-switch v-model="item.status">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
          <a-form-model-item label="批量删除">
            <a-switch v-model="crudData[0].batchDelete">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
          <a-form-model-item label="导出excel">
            <a-switch v-model="crudData[0].export">
              <a-icon slot="checkedChildren" type="check" />
              <a-icon slot="unCheckedChildren" type="close" />
            </a-switch>
          </a-form-model-item>
        </a-form-model>
      </a-card>

      <!-- crud配置 -->
      <a-card title="crud配置">
        <a-empty :description="false" v-show="crudDataFilter.length === 0">
          请先设置crud
        </a-empty>
        <div class="crudAllocation">
          <a-card
            style="width: 500px; margin: 8px"
            :title="item.label"
            v-for="(item, index) in crudDataFilter"
            :key="index"
          >
            <draggable
              class="crudAllocation"
              v-model="item.fieldData"
              animation="500"
              @start="onStart"
              @end="onEnd"
              :move="checkMove"
            >
              <a-card
                hoverable
                style="width: 200px; margin: 8px"
                :title="items.label || items.value"
                v-for="(items, indexs) in item.fieldData"
                :key="indexs"
              >
                <a-switch
                  slot="extra"
                  checked-children="开"
                  un-checked-children="关"
                  v-model="items.isAdopt"
                />
                <img
                  v-if="items.isAdopt"
                  src="../../assets/collect.png"
                  alt=""
                  style="width: 39px; position: absolute; top: -3px; right: 0"
                />

                <a-form-model
                  v-if="items.isAdopt"
                  layout="horizontal"
                  v-bind="{
                    labelCol: { span: 8 },
                    wrapperCol: { span: 14 }
                  }"
                >
                  <a-form-model-item label="禁用" v-if="item.mark != 1">
                    <a-switch
                      checked-children="开"
                      un-checked-children="关"
                      v-model="items.disabled"
                    />
                  </a-form-model-item>
                </a-form-model> </a-card
            ></draggable>
          </a-card>
        </div>
      </a-card>
    </div>
    <a-drawer
      title="字段设置"
      :maskClosable="false"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      ><a-form-model :model="settingsFrom" layout="horizontal">
        <a-form-model-item label="字段描述">
          <a-input
            v-model="settingsFrom.label"
            allow-clear
            placeholder="请输入字段描述"
          />
          <a-divider />
        </a-form-model-item>
        <a-form-model-item label="字段类型">
          <a-select
            v-model="settingsFrom.fieldType"
            allow-clear
            :options="typeOptions"
          >
          </a-select>
          <a-divider />
        </a-form-model-item>
        <!-- 选项配置及动态数据配置 start -->
        <a-form-model-item
          label="选项配置"
          v-if="settingsFrom.fieldType === 'select'"
        >
          <a-radio-group buttonStyle="solid" v-model="settingsFrom.dynamic">
            <a-radio-button :value="false">静态数据</a-radio-button>
            <a-radio-button :value="true">动态数据</a-radio-button>
          </a-radio-group>

          <!-- <a-input
            v-show="options.dynamic"
            v-model="options.dynamicKey"
            placeholder="动态数据变量名"
          ></a-input> -->
          <a-row :gutter="8" v-show="!settingsFrom.dynamic">
            <div
              class="option-change-box"
              v-for="(val, index) in settingsFrom.options"
              :key="index"
            >
              <a-col :span="9"
                ><a-input v-model="val.label" placeholder="名称"
              /></a-col>
              <a-col :span="9"
                ><a-input v-model="val.value" placeholder="值"
              /></a-col>
              <a-col :span="6"
                ><div @click="handleDelete(index)" class="option-delete-box">
                  <a-icon type="delete" /></div
              ></a-col>
            </div>
            <a-col :span="24"><a @click="handleAdd">添加</a></a-col>
          </a-row>
        </a-form-model-item>
        <!-- 选项配置及动态数据配置 end -->
        <a-form-model-item label="操作属性">
          <a-checkbox v-model="settingsFrom.isRequired" />
        </a-form-model-item>
        <a-form-model-item label="校验">
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <!-- <a-checkbox v-model="settingsFrom.multiple">多选</a-checkbox>
          <a-checkbox v-model="settingsFrom.range">范围选择</a-checkbox>
          <a-checkbox v-model="settingsFrom.showTime">时间选择器</a-checkbox>
          <a-checkbox v-model="settingsFrom.showSearch">可搜索</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox>
          <a-checkbox v-model="settingsFrom.clearable">可清除</a-checkbox> -->
        </a-form-model-item>
      </a-form-model>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          Cancel
        </a-button>
        <a-button type="primary" @click="onClose"> Submit </a-button>
      </div>
    </a-drawer>
    <a-modal
      :width="800"
      title="代码预览"
      :visible="codeModal"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      :maskClosable="false"
      @cancel="handleCancel"
    >
      <codemirror
        :options="{
          mode: 'vue',
          extraKeys: { 'Ctrl-Space': 'autocomplete' }
        }"
        :value="vueCode"
      ></codemirror>
    </a-modal>
  </div>
</template>

<script>
//导入draggable组件
import * as vueCodemirrorLite from "vue-codemirror-lite";
import draggable from "vuedraggable";
import * as config from "./config";
import { pagesElement } from "../../utils/pagesElement";
import { pagesCode } from "../../utils/pagesCode";
require("codemirror/mode/javascript/javascript");
require("codemirror/mode/vue/vue");
require("codemirror/addon/hint/show-hint.js");
require("codemirror/addon/hint/show-hint.css");
require("codemirror/addon/hint/javascript-hint.js");
export default {
  //注册draggable组件
  components: {
    draggable,
    codemirror: vueCodemirrorLite.codemirror
  },
  data() {
    return {
      vueCode: "",
      codeModal: false,
      confirmLoading: false,
      settingsFrom: {},
      visible: false,
      typeOptions: config.typeOptions,
      crudData: config.crudData,
      basicsData: [],
      drag: false
    };
  },
  created() {
    this.basicsData = [
      //   {
      //     columnName: "sy", // 字段列名
      //     columnComment: "字段描述", // 字段描述
      //     isCreate: true, // 插入
      //     isEdit: true, // 编辑
      //     isList: true, // 列表
      //     isQuery: true, // 查询
      //     isDetail: true, // 查看
      //     isRequired: true, //必填
      //     htmlType: "input", // 显示类型
      //     dictType: "", // 字典类型
      //   },
    ];
    this.interfaceData = JSON.stringify({
      name: "",
      profession: "2",
      age: 24
    });
    this.interfaceOk();
  },
  computed: {
    crudDataFilter() {
      return this.crudData.filter(item => item.status);
    }
  },
  methods: {
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.codeModal = false;
    },
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.codeModal = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleDelete(deleteIndex) {
      // 删除
      this.settingsFrom.options = this.settingsFrom.options.filter(
        (val, index) => index !== deleteIndex
      );
    },
    handleAdd() {
      // 添加
      this.settingsFrom.options = [
        ...this.settingsFrom.options,
        {
          value: `${this.settingsFrom.options.length + 1}`,
          label: "选项" + (this.settingsFrom.options.length + 1)
        }
      ];
    },
    fieldSet(data) {
      // 字段设置
      this.visible = true;
      this.settingsFrom = data;
    },
    // 字段描述发生变化
    labelChange(el, data, index) {
      this.crudData.forEach(element => {
        element.fieldData.forEach(daughter => {
          if (daughter.value === data.columnName) {
            daughter.label = data.label;
          }
        });
      });
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    previewCode(sign) {
      if (sign === 1) {
        this.vueCode = pagesCode(this.basicsData, this.crudData);
      } else {
        this.vueCode = pagesElement(this.basicsData, this.crudData);
      }

      this.codeModal = true;
    },
    checkMove(evt) {
      return true;
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    checkCode() {
      console.log("debug log --> ", pagesCode(this.basicsData));
    },
    // 获取接口数据
    interfaceOk() {
      try {
        this.basicsData = [];
        let _interfaceData = JSON.parse(this.interfaceData);

        for (const key in _interfaceData) {
          this.basicsData.push({
            columnName: key, // 字段列名
            label: key, // 字段描述
            fieldType: "input",
            isRequired: true, //必填
            dynamic: false, // 是否动态数据
            options: [{ value: 1, label: "选项1" }] // 选项配置
          });
          this.crudData.forEach(element => {
            element.fieldData.push({
              value: key,
              label: key
            });
          });
        }
      } catch (error) {}
    }
  }
};
</script>

<style lang="scss" scoped>
.warp {
  width: 100%;
  .content {
    padding: 15px;
  }
}
.page-top {
  width: 100%;
  height: 56px;
  text-align: center;
  background: #13c2c2;
  color: #fff;
  line-height: 56px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.basics {
  display: flex;
  flex-wrap: wrap;
  .basicsCard {
    width: 300px;
    margin: 8px;
  }
}

.crudAllocation {
  display: flex;
  flex-wrap: wrap;
}
</style>
